<template>
	<view class="container">
		<cu-custom bgColor="bg-blue">
			<block slot="content"></block>
		</cu-custom>
		<view class="headIndex">
			<view class="itemBox flex align-center flex-direction" @click="navTo('/pages/qd/joinqd')">
				<image src="../../static/home_join.png" mode=""></image>
				<view class="itemText">加入签到</view>	
			</view>
			<view class="itemBox" @click="navTo('/pages/qd/ydqd')">
				<image src="../../static/home_create.png" mode=""></image>
				<view class="itemText">预定签到</view>	
			</view>
			<view class="itemBox" @click="scanCode">
				<image src="../../static/home_scan.png" mode=""></image>
				<view class="itemText">扫码签到</view>	
			</view>
		</view>
		<!-- 列表 -->
		<scroll-view>
			<view class="flex justify-center margin-top-xl padding-top-xxl" v-if="!goodsList.length">
				<image src="../../static/notet.png" style="width: 540upx;" mode="widthFix"></image>
			</view>
			<view class="SJList" v-else>
				<view class="ListItem margin-bottom" v-for="(item,index) in goodsList" :key="index" @click.stop="navTo(`/pages/signDetail/index?id=${item.id}&edit=false`)">
					<view class="headBox">
						<image :src="item.coverImg?item.coverImg:'../../static/ad.png'" mode=""></image>
					</view>
					<view class="bottomBox flex align-center justify-between">
						<view class="nameBox flex flex-direction">
							<view class="titleName">
								{{item.title}}
							</view>
							<view class="secTit margin-top-xs">
								{{ item.eventStartTime }}&nbsp;{{ item.meetingEvent.title }}
							</view>
						</view>	
						<view class="" @click.stop="sign(item,index)">
							<image class="qdBtn" :src="item.signStatus == 0?'../../static/qd.png':'../../static/qd_select.png'" mode=""></image>
						</view>
					</view>	
				</view>	
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>	
		</scroll-view>
		<cu-bar :current="1"></cu-bar> 
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore,
		},
		data() {
			return {
				pageindex:1,
				goodsList:[],
				loadingType: 'more', //加载更多状态
			};
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadMore('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadMore();
		},
		onShow() {
			if(!this.hasLogin){
				uni.navigateTo({
					url:'/pages/login/login'
				})
				return
			}
			setTimeout(()=>{
				this.loadMore('refresh');
			},500)
		},
		computed: {
			...mapState(['hasLogin'])
		},			
		methods: {
			/**扫一扫 */
			scanCode() {
				uni.scanCode({
					scanType: 'QR_CODE',
			
					success(res) {
						console.log(res);
					}
				});
			},
			
			/** 签到操作 */
			sign(item) {
				if(item.status!=0){
					return
				}
				uni.showLoading({
					title: '正在签到中...'
				}); //请求服务器
				
				this.$ComFunJS.ajax({
					method:"post",
					url: "/rest/api/sign",
					data:{
						eventId: item.meetingEvent.id
					},
					success:(res)=>{
						uni.hideLoading();
						this.$api.msg('签到成功');
						this.goodsList[index].status = 1;
					}
				})
			},
			navTo(url) {
				if(!this.hasLogin){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}else{
					uni.navigateTo({
						url: url
					})					
				}
			},
			//拼团列表
			loadMore(type='add',loading) {
				let _this = this;
				//没有更多直接返回
				if(type === 'add'){
					if(this.loadingType === 'nomore'){
						return;
					}
					this.loadingType = 'loading';
				}else{
					this.loadingType = 'more'
				}
				if(type === 'refresh'){
					this.pageindex = 1;
				}
				this.$ComFunJS.ajax({
					method:"get",
					url: "/rest/api/myList",
					data:{
						page:_this.pageindex,
					},
					success:(res)=>{
						console.log('ads')
						let goodsList = res.data
						if(type === 'refresh'){
							this.goodsList = [];
						}
						if(goodsList.length>0){
							_this.pageindex++
						}		
						this.goodsList = this.goodsList.concat(goodsList);
						//判断是否还有下一页，有是more  没有是nomore(测试数据判断大于20就没有了)
						this.loadingType  = res.data.length &&res.data.length >=10 ? 'more' : 'nomore';
						if(type === 'refresh'){
							if(loading == 1){
								uni.hideLoading()
							}else{
								uni.stopPullDownRefresh();
							}
						}							
					}
				})
			},
		},
	}
</script>
<style lang="scss">
.headIndex{
	height: 210upx;
	background: #1A75FF;
	border-radius: 0px 0px 40upx 40upx;
	padding: 0 70upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.itemBox{
		width: 112upx;
		image{
			width: 112upx;
			height: 112upx;
		}
		.itemText{
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
.SJList{
	padding: 32upx;
	.ListItem{
		width: 100%;
		height: 440upx;
		background: #FFFFFF;
		border-radius:40upx;
		overflow: hidden;
		.headBox{
			width: 100%;
			height: 300upx;
			image{
				width: 100%;
				height: 300upx;
				border-radius:40upx 40upx 0 0;
			}
		}
		.bottomBox{
			padding: 20upx 30upx;
			.nameBox{
				width: 60%;
			}
			.titleName{
				font-size: 32upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.secTit{
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.qdBtn{
				width: 84upx;
				height: 84upx;
			}
		}
	}
}
</style>
